<template>
    <div class="box">
        <div class="item">
        <el-card style="max-width: 480px">
            <template #header>
            <div class="card-header">
                <span>校区校长办公室</span>
            </div>
            </template>

            <table>
            <tr>
                <td >0001</td>
                <td>人员1</td>
            </tr>
            <tr>
                <td >0001</td>
                <td>人员1</td>
            </tr>
            <tr>
                <td >0001</td>
                <td>人员1</td>
            </tr>
            </table>

        </el-card>
        </div>

        <div class="item">
        <el-card style="max-width: 480px">
            <template #header>
            <div class="card-header">
                <span>会计室</span>
            </div>
            </template>

            <table>
            <tr>
                <td> 分机号</td>
                <td>人员</td>
            </tr>
            <tr>
                <td>0001</td>
                <td>人员1</td>
            </tr>
            <tr>
                <td>0001</td>
                <td>人员1</td>
            </tr>
            <tr>
                <td>0001</td>
                <td>人员1</td>
            </tr>
            <tr>
                <td >0001</td>
                <td>人员1</td>
            </tr>
            </table>

            
        </el-card>
        </div>

        <div class="item">
        <el-card style="max-width: 480px">
            <template #header>
            <div class="card-header">
                <span>行政组</span>
            </div>
            </template>

            <table>
            <tr>
                <td> 分机号</td>
                <td>人员</td>
            </tr>
            <tr>
                <td>0001</td>
                <td>主管1</td>
            </tr>
            <tr>
                <td>0001</td>
                <td>主管1</td>
            </tr>
            </table>
            <el-collapse v-model="activeName">
            <el-collapse-item title="一组" name="1" disabled>
                <div>
                <table>
                    <tr>
                    <td> 分机号</td>
                    <td>人员</td>
                    </tr>
                    <tr>
                    <td>0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td>0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td>0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td >0001</td>
                    <td>人员1</td>
                    </tr>
                </table>
                </div>
            </el-collapse-item>
            <el-collapse-item title="二组" name="2" disabled>
                <div>
                <table>
                    <tr>
                    <td> 分机号</td>
                    <td>人员</td>
                    </tr>
                    <tr>
                    <td>0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td>0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td>0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td >0001</td>
                    <td>人员1</td>
                    </tr>
                </table>
                </div>
            </el-collapse-item>
            <el-collapse-item title="企划" name="3" disabled>
                <div>
                <table>
                    <tr>
                    <td> 分机号</td>
                    <td>人员</td>
                    </tr>
                    <tr>
                    <td>0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td>0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td>0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td >0001</td>
                    <td>人员1</td>
                    </tr>
                </table>
                </div>
            </el-collapse-item>
            </el-collapse>

            
            
        
        </el-card>
        </div>


        <div class="item">
        <el-card style="max-width: 480px">
            <template #header>
            <div class="card-header">
                <span>艺文中心</span>
            </div>
            </template>


            <table>
            <tr>
                <td> 分机号</td>
                <td>人员</td>
            </tr>
            <tr>
                <td>0001</td>
                <td>主管1</td>
            </tr>
            <tr>
                <td>0001</td>
                <td>主管1</td>
            </tr>
            </table>

            <el-collapse v-model="activeName">
            <el-collapse-item title="艺文组" name="1" disabled>
                <div>
                <table>
                    <tr>
                    <td> 分机号</td>
                    <td>人员</td>
                    </tr>
                    <tr>
                    <td>0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td>0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td>0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td >0001</td>
                    <td>人员1</td>
                    </tr>
                </table>
                </div>
            </el-collapse-item>
            <el-collapse-item title="课后活动组" name="2" disabled>
                <div>
                <table>
                    <tr>
                    <td> 分机号</td>
                    <td>人员</td>
                    </tr>
                    <tr>
                    <td>0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td>0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td>0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td >0001</td>
                    <td>人员1</td>
                    </tr>
                </table>
                </div>
            </el-collapse-item>
            <el-collapse-item title="音乐厅音控室" name="3" disabled>
                <div>
                <table>
                    <tr>
                    <td> 分机号</td>
                    <td>人员</td>
                    </tr>
                    <tr>
                    <td>0001</td>
                    <td>人员1</td>
                    </tr>
                </table>
                </div>
            </el-collapse-item>
            </el-collapse>

            
            
        </el-card>
        </div>


        <div class="item">
        <el-card style="max-width: 480px">
            <template #header>
            <div class="card-header">
                <span>总务</span>
            </div>
            </template>


            <table>
            <tr>
                <td> 分机号</td>
                <td>人员</td>
            </tr>
            <tr>
                <td>0001</td>
                <td>主管1</td>
            </tr>
            <tr>
                <td>0001</td>
                <td>主管1</td>
            </tr>
            </table>

            <el-collapse v-model="activeName">
            <el-collapse-item title="行政组" name="1" disabled>
                <div>
                <table>
                    <tr>
                    <td> 分机号</td>
                    <td>人员</td>
                    </tr>
                    <tr>
                    <td>0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td>0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td>0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td >0001</td>
                    <td>人员1</td>
                    </tr>
                </table>
                </div>
            </el-collapse-item>
            <el-collapse-item title="事务组" name="2" disabled>
                <div>
                <table>
                    <tr>
                    <td> 分机号</td>
                    <td>人员</td>
                    </tr>
                    <tr>
                    <td>0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td>0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td>0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td >0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td >0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td >0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td >0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td >0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td >0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td >0001</td>
                    <td>人员2</td>
                    </tr>
                </table>
                </div>
            </el-collapse-item>
            <el-collapse-item title="采购组" name="3" disabled>
                <div>
                <table>
                    <tr>
                    <td> 分机号</td>
                    <td>人员</td>
                    </tr>
                    <tr>
                    <td>0001</td>
                    <td>人员1</td>
                    </tr>
                </table>
                </div>
            </el-collapse-item>
            </el-collapse>

            
        </el-card>
        </div>

        <div class="item">
        <el-card style="max-width: 480px">
            <template #header>
            <div class="card-header">
                <span>公共空间</span>
            </div>
            </template>


            <el-collapse v-model="activeName">
            <el-collapse-item title="小学部BD" name="1" disabled>
                <div>
                <table>
                    <tr>
                    <td> 分机号</td>
                    <td>人员</td>
                    </tr>
                    <tr>
                    <td>0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td>0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td>0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td >0001</td>
                    <td>人员1</td>
                    </tr>
                </table>
                </div>
            </el-collapse-item>
            <el-collapse-item title="中学部ID" name="2" disabled>
                <div>
                <table>
                    <tr>
                    <td> 分机号</td>
                    <td>人员</td>
                    </tr>
                    <tr>
                    <td>0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td>0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td>0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td >0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td >0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td >0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td >0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td >0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td >0001</td>
                    <td>人员1</td>
                    </tr>
                    <tr>
                    <td >0001</td>
                    <td>人员2</td>
                    </tr>
                </table>
                </div>
            </el-collapse-item>
            </el-collapse>

        </el-card>

        </div>


        <div class="item">
        <el-card style="max-width: 480px">
            <template #header>
            <div class="card-header">
                <span>VOIP网络电话</span>
            </div>
            </template>


            <table>
            <tr>
                <td> 分机号</td>
                <td>人员</td>
            </tr>
            <tr>
                <td>0001</td>
                <td>人员1</td>
            </tr>
            </table>

            <template #footer>
            <div style="text-align: left;">
                <p>说明：</p>
                <p>1、校址：710061 西安市曲江新区雁翔路2288号</p>
                <p>2、总机电话：029-68275000    直拨专线：029-6827+分机</p>
                <p>3、招生热线：029-68275888    全国统一招生专线：400-646-9833</p>
                <p>4、总机：直播0 代接：# 转接：转接按钮+分机</p>
                <p>5、拨打外线：先按９，再按外线电话，外地手机号需按９再加拨０+手机号码</p>
                <p>6、呼叫转移至手机或其他分机：请咨询资讯组工作人员</p>
            </div>
            </template>
        </el-card>
        </div>

    </div>
</template>

<script>
import { ref } from 'vue'


export default {
    setup () {
        
        const activeName = ref(['1', '2', '3'])
        return {activeName}
    }
}
</script>

<style lang="scss">
body {
  font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC',
  'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}
.box {
    margin: 10px;
    column-count: 2;
    column-gap: 10px;
    @media screen and (min-width: 400px) {
      column-count: 2;
    }
    
    @media screen and (min-width: 600px) {
      column-count: 3;
    }
    
    @media screen and (min-width: 800px) {
      column-count: 4;
    }
    
    @media screen and (min-width: 1100px) {
      column-count: 5;
    }

    .item {
      margin-bottom: 10px;
      /* table {
        border-spacing: 1px;
        border-color: rgb(255, 255, 255);
        width: 100%;
      } */

      .el-collapse {
        border-top: none;
        .el-collapse-item {
          button {
            background-color: #E6A23C;
            font-weight: 400;
            display: block;
            text-align: center;
            .el-icon {
              display: none;
            }
          }
          .el-collapse-item__header {
            color: #fff;
            font-weight: bold;
          }
          .el-collapse-item__wrap {
              border-bottom: none;
          }
        }

      }

      .el-card {
        .el-card__header {
          background-color: #409EFF;
          color: #fff;
          text-align: center;
        }

        .el-card__body {
          table {
            border-spacing: 1px;
            border-color: rgb(255, 255, 255);
            width: 100%;
            font-size: 14px;
          }
        }

        .el-card__footer {
          font-size: 14px;
          color: #606266;
        }

      }
      

    }



}
</style>